<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 跳转显示隐藏---面包屑---文字跳转 -->
        <div v-if="this.$route.query.name">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
        </div>
        <!-- 表单 -->
        <el-form ref="form" label-width="80px">
          <div class="add">
            <el-form-item label="目录名称" size="small">
              <el-input v-model="input"></el-input>
            </el-form-item>
            <el-form-item label="状态" size="small">
              <el-select placeholder="请选择" v-model="selectVal">
                <el-option label="启用" value="启用"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
              </el-select>
            </el-form-item>
            <div class="btnAdd">
              <el-button
                style="margin-left: 10px"
                size="small"
                @click="clearMedium"
                >清除</el-button
              >
              <el-button type="primary" size="small" @click="searchPrimary"
                >搜索</el-button
              >
            </div>

            <div class="link">
              <div v-if="this.$route.query.name">
                <el-link
                  class="link-a"
                  type="primary"
                  :underline="false"
                  onClick="javascript :history.back(-1);"
                >
                  <i class="el-icon-back" style="margin-right: 3px"></i
                  >返回学科</el-link
                >
              </div>
              <div class="addbar">
                <el-button
                  type="success"
                  size="small"
                  @click="append('success')"
                >
                  <i class="el-icon-edit" style="margin-right: 5px"></i>
                  新增目录
                </el-button>
              </div>
            </div>
          </div>
        </el-form>

        <!-- 阴影部分 -->
        <div>
          <el-alert
            :title="`数据一共 ${total} 条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="200">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称" width="200">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="250">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="250" :formatter="formatterDate">
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" width="200">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="200"
            :formatter="filterTag"
          >
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="text" @click="subjectCF(row)">{{
                !row.state ? '启用' : '禁用'
              }}</el-button>
              <el-button
                type="text"
                typeClick="modify"
                @click="append('modify', row.id)"
                :disabled="row.state ? true : false"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="del(row.id)"
                :disabled="row.state ? true : false"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="el-pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, sizes, jumper"
            :current-page="page"
            :page-size="pageSize"
            :total="total"
            :page-sizes="pages"
          >
          </el-pagination>
        </div>
        <!-- 弹出框 -->
        <el-dialog :title="drawerTitle" :visible.sync="showAdd" width="400px">
          <el-form
            label-width="auto"
            :rules="rules"
            ref="ruleForm"
            :model="ruleForm"
          >
            <el-form-item label="所属学科" size="small" prop="subjectID">
              <el-select
                v-model="ruleForm.subjectID"
                placeholder="请选择"
                style="width: 282px"
              >
                <el-option
                  :label="item.subjectName"
                  :value="item.subjectID"
                  v-for="item in list"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="目录名称" prop="directoryName">
              <el-input
                v-model="ruleForm.directoryName"
                width="250px"
                placeholder="请输入学科名称"
                size="small"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <div class="dialog-footer">
                <el-button @click="cancellation">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// import { list as getCompanys } from '@/api/hmmm/companys'
// import { list as getQuestion } from '@/api/hmmm/questions'
import {
  list,
  detail,
  add,
  update,
  remove,
  changeState
} from '../../api/hmmm/directorys'
import { formatDate } from '../components/timeDate.js'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      list: [],
      // 弹出框的数据
      ruleForm: {
        directoryName: '',
        subjectID: ''
      },
      // 分页器
      page: 1,
      pageSize: 10,
      total: 10,
      pages: [5, 10, 20, 50],
      // 搜索框
      selectVal: '',
      input: '',
      // 显示隐藏弹框
      showAdd: false,
      // 校验
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ]
      },
      // type区分添加/修改
      typeClick: ''
    }
  },
  async created () {
    // getCompanys()
    // getQuestion()

    this.initData()
  },
  computed: {
    drawerTitle () {
      let title = '标题'
      if (this.typeClick === 'success') title = '新增目录'
      if (this.typeClick === 'modify') title = '修改目录'
      return title
    }
  },
  methods: {
    // 获取列表
    async initData () {
      if (this.$route.query.name) {
        const { data } = await list({
          page: 1,
          pagesize: 10,
          subjectID: this.$route.query.id
        })
        this.list = data.items
        this.total = data.counts
      // console.log(this.$route.query.name)
      } else {
        const { data } = await list({
          page: this.page,
          pagesize: this.pageSize,
          pages: this.pages
        })
        console.log(data)
        this.list = data.items
        this.total = data.counts
      }
    },
    // 页尺寸
    handleSizeChange (val) {
      console.log(val)
      this.pageSize = val
      this.initData()
    },
    // 当前页数
    handleCurrentChange (val) {
      // console.log(val)
      this.page = val
      this.initData()
    },
    // 时间格式
    formatterDate (row) {
      return formatDate(row.addDate)
    },
    // 状态
    filterTag (value, row) {
      // console.log(value.state)
      return value.state ? '已启用' : '已禁用'
    },
    // 清除
    clearMedium () {
      this.input = ''
      this.selectVal = ''
      // this.initData()
    },
    // 搜索
    async searchPrimary () {
      if (!this.input && !this.selectVal) return this.initData()
      const { data } = await list({
        directoryName: this.input,
        state: this.selectVal === '启用' ? 1 : 0
      })
      console.log(data)
      this.list = data.items
    },

    // 关闭弹窗清空表单
    handleClose () {
      this.ruleForm = {
        subjectName: ''
      }
    },
    // // 单击新增显示隐藏弹出框
    // // 新增/修改
    async append (type, id) {
      // 新增
      this.showAdd = true
      this.typeClick = type
      this.handleClose()
      // 修改
      if (type === 'modify') {
        const res = await detail({ id })
        // console.log(res)
        this.ruleForm = {
          ...res.data
        }
      }
    },
    // 点击取消
    cancellation () {
      this.showAdd = false
      this.$refs.ruleForm.resetFields()
    },
    // 点击确定
    async submit () {
      try {
        await this.$refs.ruleForm.validate()
        // 新增接口
        // console.log(this.ruleForm)
        if (this.typeClick === 'success') {
          await add({
            directoryName: this.ruleForm.directoryName,
            subjectID: this.ruleForm.subjectID
          })
          Message.success('添加成功')
        } else {
          // 修改
          // console.log(this.ruleForm)
          const { id, subjectID, directoryName } = this.ruleForm
          await update({
            id,
            subjectID,
            directoryName
          })
          Message.success('修改成功')
        }
        this.page = 1
        this.cancellation()
        this.initData()
      } catch (error) {
        console.log(error)
      }
    },
    // 删除
    del (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // console.log(id)
          await remove({ id })
          this.initData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 状态--启用/禁用
    async subjectCF (val) {
      try {
        await changeState({
          id: val.id,
          state: val.state === 1 ? 0 : 1
        })
        Message.success('修改成功')
        this.initData()
      } catch (error) {
        Message.error('修改失败')
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0;
  margin: 10px;
}
.add {
  display: flex;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.addbar {
  text-align: right;
}
.btnAdd {
  width: 200px;
}
.link {
  display: flex;
  justify-content: right;
  text-align: right;
  width: 50%;
}
.link-a {
  padding-top: 7px;
  margin-right: 10px;
}
</style>
